<!-- 岗位管理 -->
<template>
    <div>
        <el-button @click="formAddStae = true" class="anniu" type="primary" >新增岗位</el-button>
        <!-- 表单 -->
        <el-table :cell-style="rowStyle" :data="tableData" border style="width: 100%" >
          <el-table-column header-align="center" prop="id" label="序号" width="180">
          </el-table-column>
          <el-table-column header-align="center" prop="name" label="岗位名称" width="180">
          </el-table-column>
          <el-table-column header-align="center" prop="page" label="关联员工数">
          </el-table-column>
          <el-table-column header-align="center" prop="pone" label="创建人">
          </el-table-column>
          <el-table-column header-align="center" prop="date" label="创建日期">
          </el-table-column>
          <el-table-column header-align="center" label="操作">
              <template>
                <el-button class="src" type="text" size="small">编辑</el-button>
                <el-button class="src" type="text" size="small" @click="open">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" @current-change='changePage' :current-page='currentPage'>
        </el-pagination>
    </div>
</template>

<script>
export default { 
//import引入的组件需要注入到对象中才能使用
data() {
//这里存放数据
return {
    tableData:[
        {id:1, name:'施工管理员',page:5,pone:'张海俞',date:2021},
        {id:2, name:'施工管理员',page:5,pone:'张海俞',date:2021},
        {id:3, name:'施工管理员',page:5,pone:'张海俞',date:2021},
        {id:4, name:'施工管理员',page:5,pone:'张海俞',date:2021},
        {id:5, name:'施工管理员',page:5,pone:'张海俞',date:2021},
        {id:6, name:'施工管理员',page:5,pone:'张海俞',date:2021},
        {id:7, name:'施工管理员',page:5,pone:'张海俞',date:2021},
        {id:8, name:'施工管理员',page:5,pone:'张海俞',date:2021},
        {id:9, name:'施工管理员',page:5,pone:'张海俞',date:2021},
        {id:10, name:'施工管理员',page:5,pone:'张海俞',date:2021},
        {id:11, name:'施工管理员',page:5,pone:'张海俞',date:2021},
        {id:12, name:'施工管理员',page:5,pone:'张海俞',date:2021},
        {id:13, name:'施工管理员',page:5,pone:'张海俞',date:2021},
        {id:14, name:'施工管理员',page:5,pone:'张海俞',date:2021},
        {id:15, name:'施工管理员',page:5,pone:'张海俞',date:2021},
        {id:16, name:'施工管理员',page:5,pone:'张海俞',date:2021},
    ],
    nowPage:1,

    currentPage: 5,
    pageSize: 10
};
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  //获取全部数据
  getPost () {
    //console.log(this.currentPage)
    this.$axios.get('/organization/stationIn',{
      params:{
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
    }).then(res=>{
      console.log(res);
    })
    },
    rowStyle(){
        return "text-align:center"
    },
    //删除岗位
    open() {
         const h = this.$createElement;
        this.$msgbox({
          title: '删除确认',
          message: h('p', null, [
            h('span', null, '是否确认删除该岗位',),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 1000);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$message({
            type: 'info',
            message: 'action: 删除成功' + action
          });
        });
    },
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
  this.getPost()
},
}
</script>
<style lang='less' scoped>
div{
    margin-top: 75px;
}
.anniu{
    margin-bottom: -60px;
}
.src{
    font-size: 14px;
}
</style>